<template>
    <div id="editAddress">
        <van-nav-bar
                title="编辑收货地址"
                left-arrow
                :fixed=true
                :border=true
                @click-left="onClickLeft"
        ></van-nav-bar>

        <van-address-edit
                :area-list="areaList"
                :address-info="addressInfo"
                show-postal
                show-delete
                show-set-default
                show-search-result
                :area-columns-placeholder="['请选择', '请选择', '请选择']"
                @save="onSave"
                @delete="onDelete"
                style="margin-top: 3rem"
        ></van-address-edit>

    </div>
</template>

<script>
    import { getCurrentAddress,changeUserAddress,delUserAddress } from './../../../../service/api/index'
    import { mapState } from 'vuex'
    import areaList from './../../../../config/area'
    import { Toast } from 'vant'
    import PubSub from 'pubsub-js'
    export default {
        name: "EditSAddress",
        data() {
            return {
                areaList:areaList,
                addressInfo:{}
            }
        },
        computed:{
            ...mapState(['userInfo'])
        },
        mounted(){
            if(this.$route.query.address_id) {
                if(this.userInfo.token) {
                    this.getCurrentAddress(this.userInfo.token,this.$route.query.address_id)
                }
            }
        },
        methods:{
            onClickLeft(){
                this.$router.back()
            },
            async onSave(content) {
                if(this.userInfo.token){
                    let result = await changeUserAddress(this.addressInfo.id, this.userInfo.token, content.name, content.tel,
                        content.province+content.city+content.county, content.addressDetail, content.postalCode, content.isDefault,
                        content.province, content.city, content.county, content.areaCode)
                    if(result.success_code === 200) {
                        Toast({
                            message:'修改地址成功',
                            duration:500
                        });
                        //2.1 返回上一级页面
                        this.$router.back()

                        //2.2 发布修改完成
                        PubSub.publish('backToMyAddress')
                    }
                }
            },
            async onDelete() {
                if(this.userInfo.token) {
                    let result = await delUserAddress(this.addressInfo.id);
                    console.log(result)
                    if(result.success_code === 200) {
                        Toast({
                            message:'删除地址成功',
                            duration:500
                        });

                        // 返回上一级页面
                        this.$router.back()

                        // 发布删除完成
                        PubSub.publish('backToMyAddress')
                    } else {
                        Toast({
                            message:'删除地址失败',
                            duration:500
                        });
                    }
                }
            },

            async getCurrentAddress(user_id,address_id) {
                let result = await getCurrentAddress(user_id, address_id)
                if(result.success_code === 200) {
                    this.addressInfo = {
                        id:result.data._id,
                        name:result.data.address_name,
                        tel:result.data.address_phone,
                        province:result.data.province,
                        city:result.data.city,
                        county:result.data.county,
                        addressDetail:result.data.address_area_detail,
                        areaCode:result.data.areaCode,
                        postalCode:result.data.address_post_code,
                        isDefault:result.data.address_tag
                    }
                }
            }
        }
    }
</script>

<style scoped>
    #editAddress{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #F5F5F5;
        z-index: 10000;
    }
</style>